<template>
    <div class="product-content clearfix">
        <ul>
            <li class="product-box" v-for="(data, k) in movieList" :key="k" :style="{'width': width + 'px'}" @click="fun(data.type,data.id)">
                    <div class="product-list">
                        <div class="product-img">
                            <img :src=$Url+data.images[0] alt="">
                            <div class="product-evaluate" :style="{'width': (width-9) + 'px'}">
                                <p :style="{'width': (width-109) + 'px'}">综合评价 <span>{{data.evaluate}}</span></p>
                                <Rate disabled v-model="data.evaluate" />
                            </div>
                        </div>
                        <div class="product-text" v-if="data.type!==1">
                            <div class="product-price"><h2><span>￥</span>{{data.price}}</h2> <span>￥{{data.nowprice}}</span></div>
                            <p>{{data.name}}</p>
                            <span>{{data.hospital}}</span>
                        </div>

                        <div class="product-text" v-if="data.type===1">
                            <p>{{data.name}}</p>
                            <div class="product-price"><h2><span>￥</span>{{data.nowprice}}</h2> <span>￥{{data.price}}</span></div>
                        </div>
                    </div>
                    <div class="product-num product-num1">
                        <p>预约数：<span>{{data.num}}</span></p>
                    </div>
                    <div class="product-num">
                        <p>日记数：<span>{{data.num}}</span></p>
                    </div>
                <div style="clear: both"></div>
            </li>
            <div style="clear: both"></div>
        </ul>
    </div>

</template>

<script>
    export default {
        name: "productReservation",
        props: ['movieList','width'],
        created () {
            console.log(this.movieList)
        },
        data () {
            return {
                list:[]
            }
        },

        methods :{
            fun (type,id) {
                console.log(id)
                if(type===1){
                    this.$router.push({path: '/commoditydetails/index',query:{id:id,sauts:1}})
                }
                if(type===2){
                    this.$router.push({path: '/commoditydetails/index',query:{id:id,sauts:2}})
                }
            },
        }
    }

</script>

<style  lang="less">
    @import "../../style/style.less";
    li:hover{
        cursor: pointer;
    }
    .product-content{
        margin-bottom: 20px;
    }
    .product-content>ul>:last-child{
        margin-right: 0;
    }
    .product-box:hover{
        border: solid 1px #ff536f;
        .product-evaluate{
            display: block !important;
        }
        .product-text{
            >p{
                color: #FE5371;
            }
        }
        .product-num{
            background-color: #ff536f;
             p{
                color: #ffffff;
                span{
                    color: #ffffff;
                }
            }
        }
    }
    .product-box{
        width: 232px;
        height: 336px;
        background-color: #ffffff;
        border: solid 1px #dbdbdb;
        margin-bottom: 10px;
        margin-right: 4px;
        float: left;
        .product-list{
            padding: 4px;
            height: 305px;
        }
        .product-img{
            /*width: 223px;*/
            height: 183px;
            margin-bottom: 13px;
            img{
                width: 100%;
                height: 183px;
            }
            .product-evaluate{
                display: none;
                width: 223px;
                position: absolute;
                z-index: 1;
                margin-top: -36px;
                height: 31px;
                line-height: 31px;
                background-color: rgba(255,255,255,0.8);
                p{
                    color: #333333;
                    width: 111px;
                    float: left;
                    padding-left: 10px;
                    font-size: 14px;
                    span{
                        color: #ff536f;
                    }
                }
            }
            .ivu-rate{
                .ivu-rate-star{
                    margin-right: 0 !important;
                }
                .ivu-rate-star-full:before{
                    color:#ff536f !important;
                }
                .ivu-rate-star-zero:before{
                    color:#ffffff ;
                }
            }
        }
        .product-num{
            height: 30px;
            line-height: 30px;
            width: 50%;
            float: left;
            border-top: 1px solid #dbdbdb;
            p{
                color: #666666;
                font-size: 14px;
                padding-left: 5px;
                span{
                    color: @theme-color-dark;
                    padding-left: 20px;

                }
            }
        }
        .product-num1{
            border-right: 1px solid #dbdbdb;
        }
        .product-text{
            height: 103px;
            .product-price{
                height: 30px;
                line-height: 30px;
                margin-bottom:5px;
                h2{
                    color: @theme-color-dark;
                    font-size: 20px;
                    /*width:65px;*/
                    float: left;
                    span{
                        font-size: 14px;
                        color: @theme-color-dark;
                        text-decoration:none;
                    }
                }
                span{
                    text-decoration:line-through;
                    color:  #b2b2b4;
                }
            }
            p{
                color: #666666;
                font-size: 14px;
                text-align: left;
                line-height: 22px;
                padding-bottom: 3px;
            }
            span{
                color: #999999;
                font-size: 12px;
            }
        }
    }

</style>